<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">

        window.onload = function () {

            /**
             * 创建一个"广州"节点,添加到#city下
             */
            myClick("btn01", function () {
                //创建广州节点 <li>广州</li>
                //创建li元素节点
                /*
                 * document.createElement()
                 * 	可以用于创建一个元素节点对象，
                 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
                 * 	并将创建好的对象作为返回值返回
                 */
                var li = document.createElement("li");

                //创建广州文本节点
                /*
                 * document.createTextNode()
                 * 	可以用来创建一个文本节点对象
                 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 */
                var gzText = document.createTextNode("广州");

                //将gzText设置li的子节点=文本节点
                /*
                 * appendChild()
                 * 	 - 向一个父节点中添加一个新的子节点
                 * 	 - 用法：父节点.appendChild(子节点);
                 */
                li.appendChild(gzText);

                //获取id为city的元素节点，ul标签
                var city = document.getElementById("city");

                //将广州添加到city下
                city.appendChild(li);
            });

            /**
             * 将"广州"节点插入到#bj前面
             */
            myClick("btn02", function () {
                //创建一个广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //获取city
                var city = document.getElementById("city");

                /*
                 * insertBefore()
                 * 	- 可以在指定的子节点前插入新的子节点
                 *  - 语法：父节点.insertBefore(新节点,旧节点);
                 */
                city.insertBefore(li, bj);
            });

            /**
             * 使用"广州"节点替换#bj节点
             */
            myClick("btn03", function () {
                //创建一个广州
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //获取city
                var city = document.getElementById("city");

                /*
                 * replaceChild()
                 * 	- 可以使用指定的子节点替换已有的子节点
                 * 	- 语法：父节点.replaceChild(新节点,旧节点);
                 */
                city.replaceChild(li, bj);
            });

            /**
             * 删除#bj节点
             */
            myClick("btn04", function () {
                //获取id为bj的节点
                var bj = document.getElementById("bj");
                //获取city
                var city = document.getElementById("city");

                /*
                 * removeChild()
                 * 	- 可以删除一个子节点
                 * 	- 语法：父节点.removeChild(子节点);
                 */
                //city.removeChild(bj);

                //常用方法2 子节点.parentNode.removeChild(子节点);
                bj.parentNode.removeChild(bj);
            });


            /**
             * 读取#city内的HTML代码
             */
            myClick("btn05", function () {
                //获取city
                var city = document.getElementById("city");
                //获取HTML代码
                alert(city.innerHTML);
            });

            /**
             * 设置#bj内的HTML代码
             */
            myClick("btn06", function () {
                //获取bj
                var bj = document.getElementById("bj");
                //设置HTML代码
                bj.innerHTML = "昌平";
            });

            /**
             * 通过innerHTML向city中添加广州
             */
            myClick("btn07", function () {
                var city = document.getElementById("city");

                /*
                 * 使用innerHTML也可以完成DOM的增删改的相关操作
                 * 一般会两种方式结合使用
                 */

                //方法1：使用innerHTML添加一个广州
                //city.innerHTML += "<li>广州</li>";

                //方法2：使用DOM的相关方法添加一个广州
                //创建一个li
                var li = document.createElement("li");
                //向li中设置文本
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);

            });
        };

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

    </script>

</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">创建一个"广州"节点,添加到#city下</button>
    </div>
    <div>
        <button id="btn02">将"广州"节点插入到#bj前面</button>
    </div>
    <div>
        <button id="btn03">使用"广州"节点替换#bj节点</button>
    </div>
    <div>
        <button id="btn04">删除#bj节点</button>
    </div>
    <div>
        <button id="btn05">读取#city内的HTML代码</button>
    </div>
    <div>
        <button id="btn06">设置#bj内的HTML代码</button>
    </div>
    <div>
        <button id="btn07">创建一个"广州"节点,添加到#city下</button>
    </div>
</div>
</body>
</html>
